<template>
     <n-divider>具名插槽</n-divider>
     <Children>
          <template v-slot:header>
          <h1>Here might be a page title</h1>
          </template>

          <template v-slot:default>
          <p>A paragraph for the main content.</p>
          <p>And another one.</p>
          </template>

          <template v-slot:footer>
          <p>Here's some contact info</p>
          </template>
     </Children>
     <n-divider>作用域插槽</n-divider>
     <TodoList>
          <template v-slot:default="slotProps">
               <i class="fas fa-check"></i>
               <span class="green">{{ slotProps.item }}</span>
          </template>
     </TodoList>
</template>
    
<script setup lang='ts'>
import { ref } from "@vue/reactivity";
import Children from './Children.vue'
import TodoList from './TodoList.vue'
const count = ref(0)
const clickThis = (str:string)=>{
     console.log(str)
     count.value++;
}

</script>
    
<style scoped>
.flex-b{
     display: flex;
     justify-content: center;
}
</style>